<template>
  <div class="project-list-warp" @click="onListClick">
    <div class="list-container bg-white">
      <div class="content">
        <div class="context">
          <div class="title context-col">
            <slot name="title"></slot>
          </div>
          <div class="name context-col" >
            <slot name="name"></slot>
          </div>
          <div class="state context-col">
            <slot name="state"></slot>
          </div>
        </div>
        <div class="progress-circle-warp">
            <slot name="chart"></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ProjectListItem",
	props: {
		progress: {
			type: Number,
			default: 0.1
		},
	},
	data() {
		return {
			bar:{
				percent:0.32
			},
		}
	},
  methods: {
    onListClick() {
      this.$emit('itemClick')
    }
  },
}
</script>

<style lang="scss" scoped>
.project-list-warp{

  .list-container{
    margin: 15rpx 25rpx;
    padding: 12rpx 22rpx;
    overflow: hidden;
    border-radius: 15rpx;

    .content{
      display: flex;
      flex-direction: row;
			justify-content: space-between;
			align-items: center;

      .progress-circle-warp {
        width: 90px;
        height: 90px;
      }

      .context {
        font-size: 28rpx;
        color: #525252;

        .context-col {
          margin: 18rpx 0;
        }

        .title {
          font-weight: 700;
          color: black;
        }
      }
    }
  }

}
</style>
